<template>
  <div id="login">
    <div class="bodybg">
      <img src="../assets/img/dlbg.png">
      <img class="dot" src="../assets/img/dlkbg.png">
    </div>
    <div class="imgh">
      <img src="">
      <div class="title">河南省焦作经济技术开发区三维地图</div>
    </div>
    <div class="login_ck">
      <div class="inp_center">
        <div class="inp_title">统一用户登录</div>
        <div class="inpwk">
          <el-input v-model="userobj.username" class="w_wh" size="large" placeholder="请输入账号" :prefix-icon="User" />
        </div>
        <div class="inpwk">
          <el-input v-model="userobj.password" type="password" class="w_wh" size="large" placeholder="请输入密码"
            :prefix-icon="Lock" />
        </div>
        <div class="login_four_input" style="margin-top: 5px;">
          <el-checkbox v-model="checked" label="记住密码" size="large" />
          <!-- <el-checkbox v-model="dgtmap" @change="switchDigital()" label="立体地图" size="large" /> -->

        </div>
        <el-button type="primary" class="login_anni" @click="login()">登录</el-button>
      </div>
    </div>
    <footer style="color: #929DAB;position: fixed;bottom: 20px;left: 50%;transform: translate(-50%,0);">
      <span>技术支持:郑州景观地理空间信息研究院</span>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { mainStore } from '../store';
import $sys from '../api/api';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const $store = mainStore();
const checked = ref(false);
const $router = useRouter();
const base64 = ref('');
const checkcode = ref('');
const userobj = reactive({});
const dgtmap = ref(false);
onMounted(() => {
  localStorage.setItem('dgtmap', true);
  dgtmap.value = false;

});

if (localStorage.getItem("userName")) {
  userobj.username = localStorage.getItem("userName");
  userobj.password = localStorage.getItem("password");
  checked.value = true;
}
document.onkeydown = (e) => {
  if (e.keyCode === 13 && location.href.indexOf("login") !== -1) {
    login();
  }
};
function login() {
  if (checkobj()) {
    $sys.sysLogin(userobj).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "登录成功！",
        });
        localStorage.setItem("token", res.data.token);
        if (checked.value) {
          localStorage.setItem("userName", userobj.username);
          localStorage.setItem("password", userobj.password);

        } else {
          localStorage.removeItem("userName");
          localStorage.removeItem("password");
        }
        $router.push({
          name: 'map'
        });

      } else {
        ElMessage({
          message: res.message,
          type: 'warning',
        });
        userobj.captcha = '';
      }
    }).catch(err => {
      ElMessage({
        message: err.data.message,
        type: 'warning',
      });
    });
  }
}
function checkobj() {
  let flag = false;
  if (userobj.username == '' || !userobj.username) {
    ElMessage({
      message: '请输入账号!',
      type: 'warning',
    });
  } else if (userobj.password == '' || !userobj.password) {
    ElMessage({
      message: '请输入密码!',
      type: 'warning',
    });
  } else {
    flag = true;
  }
  return flag;
}

</script>

<style scoped>
body {
  position: relative;
}

.bodybg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.bodybg img {
  width: 100%;
  height: 100%;
}

.bodybg .dot {
  width: 700px;
  height: 40%;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%)
}

.clear {
  clear: both;
}

img {
  display: inline;
}

.login_ck {
  margin: 0 auto;
  width: 416px;
  height: 403px;
  border-radius: 10px;
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  background-color: #01142E;
  border: 1px solid #007BF9;
}

.title {
  font-size: 38px;
  color: white;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  /* font-weight: bold; */
  margin-top: 100px;
}

.imgh img {
  width: 30%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 90px;
}


.el-icon svg {
  font-size: 16px;
  color: #2f5282;
  font-size: 20px;
}

.w_wh {
  margin: 0 auto;
  font-size: 16px;
}

.inp_center {
  width: 70%;
  margin: 0 auto;
}

.inp_center .inp_title {
  color: white;
  text-align: center;
  font-size: 30px;
}

.inpwk {
  margin-top: 17px;
}

.zhongj {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zhongjx1 {
  width: 60%;
  margin-left: 0;
}
</style>
<style lang="less">
#login {
  ::-webkit-scrollbar {
    background-color: #031f30;
    width: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(1, 80, 143, 0.6);
    border-radius: 500px;
  }
}

.el-input__wrapper {
  border: 1px #2f3f54 solid;
  box-shadow: none;
  border-radius: 3px;
}
</style>

<style>
.w_wh {
  height: 44px;
}

.login_anni {
  width: 100%;
  height: 44px;
  margin-top: 5px;
}

input.el-input__inner:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 400px #01142E inset !important;
  color: #f00 !important;
  transition: background-color 5000s ease-in-out 0s;
}

.borderless-input {
  border: none;
  outline: none;
  /* 可选，去除焦点时的轮廓 */
}
</style>